/*
 * @Author: viivLgr 
 * @Date: 2018-06-04 18:19:19 
 * @Last Modified by: viivLgr
 * @Last Modified time: 2018-06-04 18:32:35
 */
import React from 'react';

class ListSearch extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchType: 'productId', // productId  productName
            searchKeyword: ''
        }
    }
    // 数据变化
    onValueChange(e){
        let name = e.target.name,
            value = e.target.value.trim();
        this.setState({
            [name] : value
        });
    }
    // 提交表单
    onSearch(){
        this.props.onSearch(this.state.searchType, this.state.searchKeyword);
    }
    // 输入关键字后按回车提交
    onSearchKeywordKeyUp(e){
        if(e.keyCode === 13){
            this.onSearch();
        }
    }
    render() {
        return (
            <div className="row search-wrap">
                <div className="col-md-12">
                    <div className="form-inline">
                        <div className="form-group">
                            <select className="form-control" 
                                name="searchType" 
                                onChange={(e) => this.onValueChange(e)}>
                                <option value="productId">按商品Id查询</option>
                                <option value="productName">按商品名称查询</option>
                            </select>
                        </div>
                        <div className="form-group">
                            <input className="form-control" 
                                placeholder="关键词" 
                                name="searchKeyword"
                                onKeyUp={e => this.onSearchKeywordKeyUp(e)}
                                onChange={(e) => this.onValueChange(e)}/>
                        </div>
                        <button className="btn btn-primary" onClick={e => this.onSearch()}>搜索</button>
                    </div>
                </div>
            </div>
        );
    }
}

export default ListSearch;